<script setup>
import {ajax} from '@/utils/tradeInfo';
import {onMounted, ref} from 'vue';

const tradeInfo = ref([])
const channelEle = ref(null)
const share = () => {
  channelEle.value.open()
  uni.hideTabBar()
}
const maskClick = () => {
  uni.showTabBar()
  channelEle.value.close()
}
const navigateTo = index => {
  uni.navigateTo({
    url: `/pages/tradeInfo/informationInfo?page=${index}`
  })
}
const channels = ref([
  {
    name: '微信好友',
    icon: '../../../static/wechat.png'
  },
  {
    name: '朋友圈',
    icon: '../../../static/moments.png'
  },
  {
    name: 'QQ好友',
    icon: '../../../static/QQ.png'
  },
  {
    name: '复制链接',
    icon: '../../../static/copy.png'
  }
])
onMounted(async () => {
  const res = await uni.request({
    url: 'http://localhost:3000/consultationInfo?id=All',
  })
  tradeInfo.value = res.data.data
})
</script>

<template>
  <div class="trade">
    <div v-for="trade in tradeInfo" :key="trade.id" class="item">
      <div class="user-container">
        <div class="user">
          <image :src="trade.userAvatarUrl" class="user-image"></image>
          <div class="name">{{ trade.userName }}</div>
        </div>
        <div
            :style="{color: trade.concern ? '#999999' : 'black'}"
            class="concern link"
            @click="trade.concern = !trade.concern"
        >
          {{ trade.concern ? '已关注' : '+ 关注' }}
        </div>
      </div>
      <div class="info">
        <p class="text">{{ trade.content.text }}</p>
        <div class="navigateTo link" @click="navigateTo(trade.id)">...全文</div>
      </div>
      <div class="imgs">
        <image :src="trade.content.urls[0]" class="img"></image>
      </div>
      <div class="social-actions">
        <div class="social collection link" @click="trade.collection = !trade.collection">
          <img
              :src="trade.collection ? '../../../static/Scollect.png' : '../../../static/collect.png'"
              alt=""
              class="social-image"/>
          <span>收藏</span>
        </div>
        <div class="social comment link">
          <img
              alt=""
              class="social-image"
              src="../../../static/comment.png"/>
          <span @click="navigateTo(trade.id)">评论</span>
        </div>
        <div class="social like link" @click="()=>{
					trade.like.islike = !trade.like.islike
					trade.like.islike ? trade.like.total++ : trade.like.total--
				}">
          <img
              :src="trade.like.islike ? '../../../static/Slike.png' : '../../../static/like.png'"
              alt=""
              class="social-image"/>
          <span>{{ trade.like.total }}</span>
        </div>
        <div class="social share link" @click="share">
          <img
              alt=""
              class="social-image"
              src="../../../static/share.png"/>
          <span>分享</span>
        </div>
      </div>
    </div>
    <uni-popup ref="channelEle" background-color="#fff" border-radius="10px 10px 0 0" type="bottom"
               @maskClick="maskClick">
      <view class="channels content">
        <div v-for="(channel,i) in channels" :key="i" class="channel link" @click="maskClick">
          <img :src="channel.icon" alt="" class="icon"/>
          <span class="name">{{ channel.name }}</span>
        </div>
      </view>
    </uni-popup>
  </div>
</template>

<style scoped>
.trade > .item {
  width: 100%;
  margin-bottom: 10px;
}

.trade > .item:last-child {
  margin-bottom: 0;
}

.trade > .item > .user-container {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.trade > .item > .user-container > .user {
  width: 100%;
  height: 100%;
  display: flex;
}

.trade > .item > .user-container > .user > .user-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.trade > .item > .user-container > .user > .name {
  height: 100%;
  display: inherit;
  line-height: 40px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin-left: 10px;
}

.trade > .item > .user-container > .concern {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
  border-radius: 20px;
  font-weight: bold;
}

.trade > .item > .info {
  width: 100%;
  color: #666;
  margin-bottom: 5px;
  display: flex;
  position: relative;
}

.trade > .item > .info > .text {
  width: 89%;
  height: calc(22px * 3);
  overflow: hidden;
}

.trade > .item > .info > .navigateTo {
  display: inline;
  position: absolute;
  right: 0;
  bottom: 0;
  color: blue;
}

.trade > .item > .imgs {
  width: 100%;
  height: 160px;
  margin-bottom: 10px;
  /* outline: 1px solid red; */
}

.trade > .item > .imgs > .img {
  width: 260px;
  height: 100%;
  border-radius: 12px;
}

.trade > .item > .social-actions {
  width: 80%;
  height: 21px;
  display: flex;
  justify-content: space-between;
}

.trade > .item > .social-actions > .social {
  display: inline-flex;
}

.trade > .item > .social-actions > .social > .social-image {
  width: 20px;
  height: 20px;
}

.channels {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channels > .channel {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.channels > .channel > .icon {
  width: 35px;
  height: 35px;
}

.channels > .channel > .name {
  font-size: 14px;
}
</style>